<template>
	<view class="main">
		<Header :title="t('deviceSetting.title')" />
		<view class="main-box">
			<up-cell-group :border="false" class="cell-list slider-cell">
				<up-cell
					:title="t('deviceSetting.lowCharge')"
					:isLink="true"
					url="/pages/manage/vehicleSettings/vehicleInfo"
					rightIconStyle="color:#000000e6;font-size:14px"></up-cell>
				<up-cell>
					<template #title>
						<up-slider
							v-model="query.low_recharge"
							blockSize="28"
							showValue></up-slider>
					</template>
				</up-cell>
			</up-cell-group>
			<up-cell-group :border="false" class="cell-list slider-cell">
				<up-cell
					:title="t('deviceSetting.volume')"
					:isLink="true"
					url="/pages/manage/vehicleSettings/vehicleInfo"
					rightIconStyle="color:#000000e6;font-size:14px"></up-cell>
				<up-cell>
					<template #title>
						<up-slider
							v-model="query.sound"
							blockSize="28"
							showValue></up-slider>
					</template>
				</up-cell>
			</up-cell-group>
			<up-cell-group :border="false" class="cell-list">
				<up-cell :title="t('deviceSetting.garbageSetting')">
					<template #right-icon>
						<up-icon
							color="#000000e6"
							name="arrow-right"
							v-if="!showGarbage"
							size="14"
							@click="showGarbage = true"></up-icon>
						<view class="but" v-else>
							<up-button
								:text="t('complete')"
								@click="showGarbage = false"></up-button>
						</view>
					</template>
				</up-cell>
				<view v-if="showGarbage" class="set-cell">
					<up-cell>
						<template #title>
							<view class="but-box">
								<up-button
									v-for="(i, ind) in butList"
									:text="i.name"
									:class="
										selectMode == i.value
											? 'active-but'
											: ''
									"
									@click="selectMode = i.value"
									:key="ind"></up-button>
							</view>
						</template>
					</up-cell>
					<up-cell
						:title="
							t('deviceSetting.garbageValueSetting')
						"></up-cell>
					<up-cell class="gar-cell">
						<template #title>
							<up-slider
								v-model="garbageValue"
								blockSize="28"
								min="1"
								max="100"
								showValue></up-slider>
						</template>
					</up-cell>
					<up-cell :title="t('deviceSetting.overflow')">
						<template #right-icon>
							<view class="icons">
								<up-text
									:text="query.body"
									size="14"
									color="rgba(0, 0, 0, 0.6)"></up-text>
								<up-icon
									color="#000000e6"
									@click="openPop"
									size="14"
									name="arrow-right"></up-icon>
							</view>
						</template>
					</up-cell>
				</view>
			</up-cell-group>
			<up-cell-group :border="false" class="cell-list">
				<up-cell :title="t('deviceSetting.light')">
					<template #right-icon>
						<up-switch v-model="isRemind"></up-switch>
					</template>
				</up-cell>
			</up-cell-group>
			<view class="bottom-bot">
				<up-button type="primary" :text="t('save')"></up-button>
			</view>
		</view>
	</view>

	<up-popup
		:show="showPop"
		:round="10"
		mode="center"
		@close="closePop"
		@open="openPop">
		<view class="pop">
			<picker-view
				class="picker-view"
				mask-class="mask-nview"
				indicator-class="mask-view"
				@change="pickerChange"
				:value="pickerValue">
				<picker-view-column
					v-for="(columns, index) in timeColumns"
					:key="index">
					<view
						class="item"
						v-for="(item, cindex) in columns"
						:key="cindex">
						{{ item }}
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
import Header from "@/components/header/index.vue";
import { getCurrentInstance, ref, computed, onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { getDeviceShadowApi } from "@/service/index";
const { t } = useI18n();
const query = reactive({
	low_recharge: 0, //低电量回充
	sound: 0, //音量
	body: "分钟",
});
const garbageValue = ref(1);
const selectMode = ref("recall");
const pickerValue = ref([0, 1]);
const butList = reactive([
	{
		name: t("deviceSetting.recall"),
		value: "recall",
	},
	{
		name: t("deviceSetting.pause"),
		value: "pause",
	},
	{
		name: t("deviceSetting.continue"),
		value: "continue",
	},
]);
const showGarbage = ref(false);
const isRemind = ref(false);
const deviceSn = ref("");
const hour = [];
const showPop = ref(false);
for (let i = 0; i <= 23; i++) {
	hour.push(("0" + i).slice(-2));
}
const min = [];
for (let i = 1; i <= 59; i++) {
	min.push(("0" + i).slice(-2));
}
let timeColumns = [hour, min];
const openPop = () => {
	showPop.value = true;
};

const closePop = () => {
	showPop.value = false;
};
const pickerChange = () => {};
// 处理设备数据
const processDeviceData = (data: DeviceStatus): void => {};
// 获取设备信息的方法
const getDeviceShadow = async (): Promise<void> => {
	try {
		const params: DeviceShadowParams = {
			device_sn: deviceSn.value,
		};
		const { data } = await getDeviceShadowApi(params);
		if (data && !data.code) {
			processDeviceData(data.data);
		}
	} catch (error) {
		console.error("获取设备信息失败:", error);
	}
};
const saveFun = () => {};
onLoad((options) => {
	if (options?.device_sn) {
		deviceSn.value = options.device_sn;
		getDeviceShadow();
	}
});
</script>

<style lang="scss" scoped>
.main-box {
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}
.cell-list {
	background-color: #fff;
	border-radius: 10px;
	:deep(.u-cell__title-text) {
		font-size: 14px !important;
	}
	:deep(.u-slider-inner) {
		padding: 10px 10px 10px 38px !important;
	}
	:deep(.u-slider__button) {
		background-color: rgba(0, 0, 0, 0);
		cursor: grab;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	}
	:deep(.u-cell__body) {
		padding: 10px 10px 10px 20px !important;
	}
	:deep(.u-slider__show-value) {
		font-size: 12px;
		color: #888;
	}
	:deep(.u-slider__base) {
		background-color: rgb(233, 233, 233) !important;
	}
}
.slider-cell {
	:deep(.u-cell:last-child) {
		.u-cell__body {
			padding: 0 !important;
			padding-top: 5px !important;
		}
	}
}
.set-cell {
	:deep(.u-line) {
		display: none !important;
	}
}
.gar-cell {
	:deep(.u-cell__body) {
		padding: 0 !important;
		padding-top: 5px !important;
	}
}
:deep(.u-cell:last-child) {
	.u-line {
		border: none !important;
	}
}
.but {
	:deep(.u-button--info) {
		border-color: #e8e8e8;
		height: 31px;
		width: 58px;
		line-height: 31px;
		color: #333;
	}
}
.but-box {
	display: grid;
	padding-top: 10px;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 20px;
	justify-items: start;
	align-items: start;
	:deep(.u-button) {
		width: 100%;
		color: #666;
		background-color: #f8f8f8;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 5px;
		padding: 0;
		height: 31px;
		line-height: 31px;
		:deep(.u-button--active) {
			background-color: #007aff !important;
			color: #fff;
			box-shadow: none;
		}
		&:hover::before,
		&:hover::after {
			display: none !important;
			opacity: 0 !important;
			background: transparent !important;
		}
	}
	.active-but {
		background-color: #007aff;
		color: #fff;
	}
}
.icons {
	display: flex;
	align-items: center;
	line-height: 20px;
	gap: 5px;
}
.bottom-bot {
	margin-top: 10px;
	:deep(.u-button--primary) {
		background-color: #007aff;
		border-radius: 5px;
		height: 46px;
	}
	:deep(.u-button__text) {
		font-size: 18px !important;
		font-weight: 400;
	}
}
.pop {
	// position: relative;
}
.picker-view {
	// background-color: #ffffff;
	overflow: hidden;
	height: 360rpx;
	.line {
		padding-top: 50rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #e8e8e8;
		text-align: center;
	}
}
:deep(.mask-view) {
	height: 118rpx !important;
}

:deep(.mask-view::before) {
	border-top: 2rpx solid #fff;
}

:deep(..mask-view::after) {
	border-bottom: 2rpx solid #fff;
}
</style>
